﻿<UserControl x:Class="VsSpeakerCompanion.UI.Sidebar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Cursor="Arrow" Name="sidebar" Width="200">
    <UserControl.Resources>
        <TextBlock x:Key="collapseSidebarText">Collapse the sidebar</TextBlock>
        <TextBlock x:Key="expandSidebarText">Expand the sidebar</TextBlock>
        <ImageSource x:Key="powerOnImage">..\Resources\BTNpower_on.png</ImageSource>
        <ImageSource x:Key="powerOffImage">..\Resources\BTNpower_off.png</ImageSource>
        <ImageSource x:Key="expandImage">..\Resources\BTNarrow_down.png</ImageSource>
        <ImageSource x:Key="collapseImage">..\Resources\BTNarrow_up.png</ImageSource>
        <ImageSource x:Key="sidebarBackgroundImage">..\Resources\sidebar_BG.png</ImageSource>
        <ImageSource x:Key="conferenceImage">..\Resources\conference.png</ImageSource>
        <Storyboard x:Key="collapseSidebarAnimation">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                           Storyboard.TargetName="sidebarBorder" 
                                           Storyboard.TargetProperty="(FrameworkElement.Height)"
                                           FillBehavior="Stop" Completed="OnCollapseSidebarAnimationCompleted">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="{Binding ElementName=header, Path=ActualHeight}" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="expandSidebarAnimation">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                           Storyboard.TargetName="sidebarBorder" 
                                           Storyboard.TargetProperty="(FrameworkElement.Height)"
                                           FillBehavior="Stop" Completed="OnExpandSidebarAnimationCompleted">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Border Name="sidebarBorder" VerticalAlignment="Top">
        <Border.Background>
            <ImageBrush ImageSource="{StaticResource sidebarBackgroundImage}" />
        </Border.Background>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
                <RowDefinition Height="Auto"  />
            </Grid.RowDefinitions>
            <Border Name="header" Padding="5" Height="40">
                <Grid>
                    <TextBlock FontFamily="Segoe UI" FontWeight="Bold" FontSize="16" Foreground="White">Demo Dashboard</TextBlock>
                    <Image Name="expandCollapseImageButton" Source="{StaticResource collapseImage}" Height="20" Margin="0,-3,27,0" HorizontalAlignment="Right" MouseLeftButtonUp="expandCollapseImageButton_MouseLeftButtonUp" ToolTip="{StaticResource collapseSidebarText}"  />
                    <Image Name="powerOnOffImageButton" Source="{StaticResource powerOffImage}" HorizontalAlignment="Right" Height="30" Margin="0,-5,0,0" MouseLeftButtonUp="powerOnOffImageButton_MouseLeftButtonUp" IsEnabled="False" ToolTip="End session"   />
                    <Line X2="{Binding ElementName=sidebarBorder, Path=ActualWidth}" VerticalAlignment="Bottom" Stroke="Black" Opacity="0.17" StrokeThickness="1.5" />
                    <Line X2="{Binding ElementName=sidebarBorder, Path=ActualWidth}" VerticalAlignment="Bottom" Stroke="White" Opacity="0.17" StrokeThickness="1.5" Margin="0,0,0,-1.5" />
                </Grid>
            </Border>
            <Grid Name="content" Grid.Row="1" />
            <Border Name="footer" Padding="5" Grid.Row="2" Height="75">
                <Grid>
                    <Line X2="{Binding ElementName=sidebarBorder, Path=ActualWidth}" VerticalAlignment="Top" Stroke="Black" Opacity="0.17" StrokeThickness="1.5" />
                    <Line X2="{Binding ElementName=sidebarBorder, Path=ActualWidth}" VerticalAlignment="Top" Stroke="White" Opacity="0.17" StrokeThickness="1.5" Margin="0,1.5,0,0" />
                    <Image Source="{StaticResource conferenceImage}" VerticalAlignment="Bottom"  Height="57"  />
                </Grid>
            </Border>
        </Grid>
    </Border>
</UserControl>
